<template>
<el-dialog :visible.sync="visible" title="查看行程" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false" class="route-dialog">
    <div class="container-route">
        <div class="clearfix">
            <div class="wrapper-info border-bottom clearfix">
                <div class="fl cover">
                    <img v-if="info.customization && info.customization.sharePoster" :src="info.customization.sharePoster" alt="产品封面图">
                </div>
                <div class="fr">
                    <div class="name" v-if="info.customizationSchedule && info.customizationSchedule.name">{{info.customizationSchedule.name}}</div>
                    <div class="row-blue row-tag" v-if="info.categoryList && info.categoryList.length>0">
                        <span color="#ECF2FF" v-for="item in info.categoryList" :key="item.id">{{item.categoryName}}</span>
                    </div>
                    <div class="row-pink row-tag" v-if="info.tagList && info.tagList.length>0">
                        <span color="#E0FFE5" v-for="item in info.tagList" :key="item.id">{{item.tagName}}</span>
                    </div>
                    <div class="row-red row-tag" v-if="info.customization && info.customization.category">
                        <span color="##FFE6E6">{{info.customization.category=='around' ? '周边游' : '国内游'}}</span>
                    </div>
                    <div class="baseInfo">
                        <el-row>
                            <el-col :span="12">产品ID：{{info.customization.id}}</el-col>
                            <el-col :span="8">零售价：¥{{info.order.retailPrice}}</el-col>
                            <el-col :span="4"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">天数：{{info.customizationSchedule ? info.customizationSchedule.days : ''}}</el-col>
                            <el-col :span="8">结算价：¥{{info.order.settlementPrice}}</el-col>
                            <el-col :span="4"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">出发地：
                                <span v-for="(item,index) in info.departureList" :key="item.id">
                                    <span>{{item.areaName}}</span>
                                    <span v-if="index!=info.departureList.length-1">|</span>
                                </span>
                            </el-col>
                            <el-col :span="8">供应商：{{supplierName}}</el-col>
                            <el-col :span="4"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">目的地：
                                <span v-for="(item,index) in info.destinationList" :key="item.id">
                                    <span>{{item.areaName}}</span>
                                    <span v-if="index<info.destinationList-1">|</span>
                                </span>
                                <!--<span>{{info.order ? info.order.destinationNames : ''}}</span>-->
                            </el-col>
                            <el-col :span="8">联系人：{{info.customization.supplierContacts}}</el-col>
                            <el-col :span="4"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12"></el-col>
                            <el-col :span="8">联系人电话：{{info.customization.supplierPhone}}</el-col>
                            <el-col :span="4"></el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <!-- 图文介绍 -->
            <div class="border-bottom introduction">
                <div class="title">图文介绍</div>
                <div v-if="info.subsidiary && info.subsidiary.description">
                    <div class="cover" v-if="info.customization.sharePoster">
                        <img :src="info.customization.sharePoster" alt="产品封面图">
                    </div>
                    <div class="intro-text" v-html="info.subsidiary.description"></div>
                </div>
                <div v-else>暂无～</div>
            </div>
            <!-- 行程描述 -->
            <div class="wrapper-route">
                <div class="module-title">行程描述</div>
                <div class="border-bottom">
                    <div class="day flex flex-row-nowrap flex-align-center">
                      <el-button type="primary" icon="el-icon-arrow-left" size="small" :disabled="active==0" @click="changeDay(-1)"></el-button>
                      <div>第{{dayText}}天</div>
                      <el-button type="primary" icon="el-icon-arrow-right" size="small" :disabled="active==scheduleActivityList.length-1" @click="changeDay(1)"></el-button>
                    </div>
                    <el-timeline v-if="scheduleActivityList && scheduleActivityList.length>0">
                        <el-timeline-item size="large" v-for="item in scheduleActivityList[active]" :key="item.id">
                            <template slot="dot">
                                <div class="circle"></div>
                            </template>
                            <!-- 集合，交通，游玩，餐饮，购物，酒店， 返程-->
                            <!-- 集合 -->
                            <div class="wrapper-route-item" v-if="item.category == 'gather'">
                                <div class="title">集合</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">集合地址</div>
                                    <div class="fr text-bold">{{item.address}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 交通 -->
                            <div class="wrapper-route-item" v-if="item.category == 'traffic'">
                                <div class="title">交通</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">交通方式</div>
                                    <div class="fr text-bold">乘{{item.type}} 从{{item.direction}}到{{item.destination}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">行驶时间</div>
                                    <div class="fr text-bold">{{item.hour}}
                                        <span v-if="item.hour">小时</span>
                                        {{item.minute}}
                                        <span v-if="item.minute">分钟</span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 游玩 -->
                            <div class="wrapper-route-item" v-if="item.category == 'play'">
                                <div class="title">游玩</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">活动:{{item.name}}</div>
                                    <!-- 图片 -->
                                    <div class="fr text-bold"></div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">活动时间</div>
                                    <div class="fr text-bold">{{item.hour}}
                                        <span v-if="item.hour">小时</span>
                                        {{item.minute}}
                                        <span v-if="item.minute">分钟</span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 餐饮 -->
                            <div class="wrapper-route-item" v-if="item.category == 'catering'">
                                <div class="title">餐饮</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">餐饮选择</div>
                                    <div class="fr text-bold">{{item.address}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">餐标</div>
                                    <div class="fr text-bold">{{item.benchmark}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">活动时间</div>
                                    <div class="fr text-bold">
                                        {{item.hour}}
                                        <span v-if="item.hour">小时</span>
                                        {{item.minute}}
                                        <span v-if="item.minute">分钟</span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 购物 -->
                            <div class="wrapper-route-item" v-if="item.category == 'shopping'">
                                <div class="title">购物</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">购物地点</div>
                                    <div class="fr text-bold">{{item.address}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">可购商品</div>
                                    <div class="fr text-bold">{{item.goods}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">购物时间</div>
                                    <div class="fr text-bold">
                                        {{item.hour}}
                                        <span v-if="item.hour">小时</span>
                                        {{item.minute}}
                                        <span v-if="item.minute">分钟</span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 酒店 -->
                            <div class="wrapper-route-item" v-if="item.category == 'hotel'">
                                <div class="title">酒店</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">酒店地址</div>
                                    <div class="fr text-bold">{{item.address}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">酒店星级</div>
                                    <div class="fr text-bold">{{item.starLevel}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">酒店名称</div>
                                    <div class="fr text-bold">{{item.name}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 返程 -->
                            <div class="wrapper-route-item" v-if="item.category == 'back'">
                                <div class="title">返程</div>
                                <div class="clearfix">
                                    <div class="fl text-grey">散团地点</div>
                                    <div class="fr text-bold">{{item.address}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">回程方式</div>
                                    <div class="fr text-bold">{{item.type}}</div>
                                </div>
                                <div class="clearfix">
                                    <div class="fl text-grey">详细说明</div>
                                    <div class="fr text-bold">{{item.intro}}</div>
                                </div>
                            </div>
                            <!-- 交通 -->
                            <!--  -->
                        </el-timeline-item>
                        <el-timeline-item>
                            <template slot="dot">
                                <div class="circle"></div>
                            </template>
                            <div class="text-bold">行程结束愉快！</div>
                        </el-timeline-item>
                    </el-timeline>
                    <div class="empty" v-else>暂无数据~</div>
                </div>
            </div>
            <!-- 费用说明 -->
            <div class="wrapper-remark border-bottom" v-if="info.subsidiary">
                <div class="title">费用说明</div>
                <div class="content">{{info.subsidiary.feeInclude ? info.subsidiary.feeInclude : ''}}</div>
                <div class="content">{{info.subsidiary.feeExclude ? info.subsidiary.feeExclude : ''}}</div>
            </div>
            <!-- 注意事项 -->
            <div class="wrapper-remark border-bottom" v-if="info.subsidiary">
                <div class="title">注意事项</div>
                <div class="content">{{info.subsidiary.attention}}</div>
            </div>
            <!-- 预定规则 -->
            <div class="wrapper-remark">
                <div class="title">预订规则</div>
                <div class="content" v-if="info.cancelRuleList && info.cancelRuleList.length>0">
                    <div v-for="item in info.cancelRuleList" :key="item.id">
                        <p v-if="!item.amount">使用日期前{{item.days}}天{{item.time}}前申请取消，不收取手续费。</p>
                        <p v-if="item.amount && item.type=='useDayBefore'">使用日期前{{item.days}}天{{item.time}}前申请取消，收取{{item.amount * 100}}.00%损失费。</p>
                        <p v-if="item.days&&item.type=='useDayBefore'">使用日期当天前申请取消，收取{{item.amount}}.00%损失费</p>
                        <p v-if="item.days&&item.type=='useDayAfter'">使用日期当天后申请取消，收取100.00%损失费。</p>
                    </div>
                    <p>如需改期，请申请取消后重新预定</p>
                </div>
            </div>
        </div>
    </div>
</el-dialog>
</template>

<script>
export default {
  props: {
    id: String
  },
  data () {
    return {
      visible: false,
      info: {
        customization: {},
        order: {}
      },
      scheduleActivityList: [],
      activeList: [],
      supplierName: '',
      active: 1,
      dayTexts: [],
      dayText: ''
    }
  },
  created () {
    let supplierInfo = localStorage.getItem('supplierInfo')
    if (supplierInfo) {
      supplierInfo = JSON.parse(supplierInfo)
      this.supplierName = supplierInfo.realName
    } else {
      // this.getSupplierInfo();
    }
  },
  methods: {
    init () {
      this.visible = true // /customization/order/schedule/
      if (this.id) {
        this.$http
          .get(`customization/order/schedule/${this.id}`)
          .then(({
            data: res
          }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            // 赋值
            this.info = res.data
            // 计算订单的零售价和结算价
            let settlementPrice = 0
            let retailPrice = 0
            if (!res.data.settlementPrice && res.data.settlementPrice !== 0) {
              res.data.priceList.map(value => {
                if (value.quantity) {
                  settlementPrice = settlementPrice + Number(value.settlementPrice) * Number(value.quantity)
                  retailPrice = retailPrice + Number(value.retailPrice) * Number(value.quantity)
                }
              })
              this.info.order.settlementPrice = settlementPrice
              this.info.order.retailPrice = retailPrice
            }
            this.scheduleActivityList = res.data.scheduleActivityList
            this.active = 0
            this.dayText = this.getDayText(this.active + 1)
            /* this.scheduleActivityList = res.data.scheduleActivityList;
                        let days = res.data.customizationSchedule.days;
                        let dayText = [];
                        this.activeList = res.data.scheduleActivityList.filter(value => {
                            return value.day == 1
                        });
                        let actiList = this.activeList;
                        let day = '';
                        for (let i = 1; i < days + 1; i++) {
                            day = this.getDayText(i);
                            dayText.push(day)
                        }
                        this.dayTexts = dayText
                        this.dayText = dayText[0]; */
          })
      }
    },
    // 切换天数(设计图中最好加前后按钮)
    changeDay (num) {
      const days = this.info.customizationSchedule.days
      let active = this.active
      active += Number(num)
      this.dayText = this.getDayText(active + 1)
      this.active = active
      const dataList = this.scheduleActivityList.filter(value => {
        return value.day == active
      })
      if (dataList && dataList.length > 0) {
        this.activeList = dataList
      } else {
        this.activeList = []
      }
    },
    getDayText (idx) {
      const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const unit = ['', '十', '百', '千', '万']
      const num = parseInt(idx)
      const getWan = (temp) => {
        const strArr = temp.toString().split('').reverse()
        let newNum = ''
        for (var i = 0; i < strArr.length; i++) {
          newNum = (i == 0 && strArr[i] == 0 ? '' : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum
        }
        return newNum
      }
      const overWan = Math.floor(num / 10000)
      let noWan = num % 10000
      if (noWan.toString().length < 4) {
        noWan = '0' + noWan
      }
      return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
    },
    getSupplierInfo () {
      this.$http
        .get('/supplier/tsupplier/getCurrentLoginSupplier')
        .then(({
          data: res
        }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          const supplierInfo = JSON.stringify(res.data)
          localStorage.setItem('supplierInfo', supplierInfo)
          this.supplierName = res.dara.realName
        })
    }
  }
}
</script>

<style lang="scss">
.route-dialog {
    img {
        width: 100%;
    }
    .el-dialog__header {
        background-color: #DBEDF6;
    }
}

.container-route {
    padding-left: 28px;
    padding-right: 26px;
}

.wrapper-info {
    .name {
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .fl {
        min-width: 322px;
    }

    .fr {
        width: calc(100% - 340px);
    }
}

.introduction {
    padding-top: 14px;

    .title {
        margin-bottom: 14px;
    }

    .intro-text {
        margin-top: 28px;
        font-weight: 500;
        width: 100%;
    }
}
.flex{
    display: flex;

}
.flex-row-nowrap {
    flex-flow: row nowrap;
}
.flex-align-center {
    align-items: center;
}
.cover {
    width: 322px;
    height: 322px;
    background-color: #eee;
    overflow: hidden;
}

.intro-text {
    width: 322px;
    overflow: hidden;
}

.row-tag {
    span {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 10px;
        padding: 0 10px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
    }
}

.row-blue {
    span {
        color: #4787ff;
        background-color: #ecf2ff;
    }
}

.row-pink {
    span {
        color: #1cb832;
        background-color: #e0ffe5;
    }
}

.row-red {
    span {
        color: #e72929;
        background-color: #ffe6e6;
    }
}

.baseInfo {
    padding-top: 17px;
    border-top: 1px solid #e2e2e6;
    color: #666666;
    font-weight: bold;
    line-height: 20px;
    font-size: 14px;

    .el-row {
        margin-bottom: 6px;
    }
}

.border-bottom {
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e2e6;
}
.wrapper-route {
    padding-top: 17px;
    .empty {
        margin: 20px auto;
        text-align: center;
        color: #666;
    }

    .module-title {
        font-size: 20px;
        font-weight: 500;
    }

    .day {
        margin-bottom: 34px;
        font-size: 16px;
        padding: 17px 0 17px 20px;
        color: #3753c6;
        font-weight: 500;
        border-bottom: 1px solid #e9e9e9;
        .el-button {
        color:#3753c6;
        background-color: #fff;
        border: 1px solid transparent;
      }
    }

    .text-bold {
        font-weight: 500;
    }

    .el-timeline-item {
        .circle {
            position: absolute;
            left: -2px;
            display: block;
            height: 14px;
            width: 14px;
            border-radius: 50%;
            border: 1px solid #aaaaaa;
            background: #fff;
        }

        .wrapper-route-item {
            padding: 12px 20px;
            background-color: #fafafa;
            border-radius: 2px;

            .clearfix {
                margin-bottom: 12px;
            }

            .fl {
                width: 60px;
            }

            .fr {
                width: calc(100% - 80px);
            }

            .title {
                font-weight: bold;
                margin-bottom: 24px;
            }

            .text-grey {
                color: #666666;
            }
        }
    }
}

.wrapper-remark {
    padding-top: 14px;
    padding-bottom: 24px;

    .content {
        margin-top: 10px;
        color: #666666;
    }
}

.title {
    font-size: 20px;
    font-weight: 500;
}
</style>
